<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入elementui样式类-->
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
    <div id="app">
        <div id="pieReport" style="width: 45%;height: 500px;float: left"></div>
        <div id="histogram" style="width: 50%;height: 500px;float: left"></div>
    </div>
</body>
<!-- import Vue before Element -->
<script src="/js/vue.js"></script>
<!-- import JavaScript -->
<script src="/js/index.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/jquery-3.2.1.js"></script>
<script src="/js/echarts.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                charts1: "",
                charts: "",
                opinion: [],
                opinionData: [],
                option1: [],
                optionData: [],
            }
        },
        methods: {
            //异步
            async drawPie(id) {
                //定义要传递的参数
                let params=new URLSearchParams();
                //发送请求,获取各种类型资产的个数
                //等待
                await axios.post('asset/assetTypesRate',params).then((res)=>{
                    //判断是否成功
                    if(res.data){
                        this.opinionData=[];
                        this.opinion=[];
                        res.data.map(item => { //遍历数组，把id存进自定义的数组里
                            this.opinion.push({name:item.asState});
                            this.opinionData.push({name:item.asState,value:item.asNum})
                        })
                        //输出到控制台
                        console.log(this.opinionData)
                        console.log(this.opinion)
                    }
                }).catch((err)=>{
                    //输出错误消息
                    console.info(err);
                });
                this.charts = echarts.init(document.getElementById(id));
                this.charts.setOption({
                    title: {
                        text: '各种资产的占比',
                        subtext: '占比数据',
                        left: 'center'
                    },
                    tooltip:{
                        trigger:'item',//将每一种状态的资产都触发
                        formatter:"{a}<br/>{b}:{c}({d}%)" //a:系列名;b:数据名(类型名称);c:数据值;d:百分比
                    },
                    legend: {
                        orient:'vertical',//布局朝向
                        x:'left',//标记靠左还是靠右
                        data: this.opinion//提供标记数据(各种资产类型名称)
                    },
                    //系列
                    series: [
                        {
                            name:'各种资产的占比',//系列名
                            type:'pie',//图形类型
                            radius:'70%',//饼图外半径
                            center:['50%','60%'],//中心的坐标
                            data: this.opinionData //各种资产类型信息(类型名称,个数)
                        }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                });
            },
            async drawHistogram(id) {
                //定义要传递的参数
                let params=new URLSearchParams();
                //发送请求,获取各种类型资产的个数
                //等待
                await axios.post('classify/classifyTypesRate',params).then((res)=>{
                    //判断是否成功
                    if(res.data){
                        this.optionData = [];
                        this.option1 = [];
                        res.data.map(item => { //遍历数组，把id存进自定义的数组里
                            this.option1.push(item.classify);
                            this.optionData.push(item.classifyNum)
                        })
                        //输出到控制台
                        console.log(this.optionData)
                        console.log(this.option1)
                    }
                }).catch((err)=>{
                    //输出错误消息
                    console.info(err);
                });
                this.charts1 = echarts.init(document.getElementById(id));
                this.charts1.setOption({
                    xAxis: {
                        type: 'category',
                        data: this.option1
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: this.optionData,
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }
                    ]
                })
            },
        },
        mounted:function () {
            this.drawPie("pieReport");
            this.drawHistogram("histogram");
        }
    })
</script>
</html>
